<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Testing Event Delegation</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
<style type="text/css">
.biz .baz{
background:#ccc;
text-align:center;
border:1px solid black;
border-color:#fff #777 #777 #fff;
margin:10px 0px;
padding:0px 10px;
}
.biz2 .baz{
background:#ccc;
}
form{margin:0}
</style>
<script type="text/javascript" src="../reg.js"></script>
<script type="text/javascript">
reg.importAll();


reg.click('div#testclick', function(e){
	if (!hcn(this,'unconfirmed')) { return; }
	var passed = true;
	if (!matches(getTarget(e), 'div')) { passed = false; }
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		this.innerHTML = 'passed click';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		this.innerHTML = 'failed click';
	}
});

reg.click('div#testdepth', function(e){
	var inner = reg.gebcn('test',this)[0];
	if (!hcn(inner,'unconfirmed')) { return; }
	rcn(inner, 'confirmed');
	rcn(inner, 'unconfirmed');
	acn(inner, 'failed');
	inner.innerHTML = 'failed depth';
},0);

reg.click('div#testdepth', function(e){
	var inner = reg.gebcn('test',this)[0];
	if (hcn(inner,'failed')) { return; }
	rcn(inner, 'failed');
	rcn(inner, 'unconfirmed');
	acn(inner, 'confirmed');
	inner.innerHTML = 'passed depth';
});

reg.click('div#testdblclick', null, null, null, function(e){
	if (!hcn(this,'unconfirmed')) { return; }
	var passed = true;
	if (!matches(getTarget(e), 'div')) { passed = false; }
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		this.innerHTML = 'passed double click';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		this.innerHTML = 'failed double click';
	}
});

reg.click('div#testmousedownup', null, function(e){
	if (!hcn(this,'unconfirmed')) { return; }
	var passed = true;
	if (!matches(getTarget(e), 'div')) { passed = false; }
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		this.innerHTML = 'passed mousedown';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		this.innerHTML = 'failed mousedown';
	}
}, function(e){
	if (!hcn(this,'confirmed') && !hcn(this,'unconfirmed')) { return; }
	var passed = true;
	if (!matches(getTarget(e), 'div')) { passed = false; }
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		this.innerHTML = 'passed mousedown and mouseup';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		this.innerHTML = 'failed mouseup';
	}
});

reg.focus('div#testfocus', function(e){
	if (!hcn(this,'unconfirmed')) { return; }
	var passed = true;
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		gebi('foc').value = 'passed focus';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		gebi('foc').value = 'failed focus';
	}
}, function(e){
	if (!hcn(this,'confirmed')) { return; }
	var passed = true;
	if (!matches(this, 'div')) { passed = false; }
	if (passed) {
		rcn(this, 'failed');
		rcn(this, 'unconfirmed');
		acn(this, 'confirmed');
		gebi('foc').value = 'passed focus and blur';
	}
	else {
		rcn(this, 'confirmed');
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		gebi('foc').value = 'failed blur';
	}
});

var over = false;
reg.hover('#baz',function(e){
	var el = gebcn('test',this)[0];
	if (over) {
		rcn(el, 'confirmed');
		rcn(el, 'unconfirmed');
		acn(el, 'failed');
		el.innerHTML = 'failed mouseover';
	} else {
		el.innerHTML = 'now mouseout...';
	}
	over = true;
	console.log('over');
},function(e){
	var el = gebcn('test',this)[0];
	if (!over) {
		rcn(el, 'confirmed');
		rcn(el, 'unconfirmed');
		acn(el, 'failed');
		el.innerHTML = 'failed mouseout';
	} else {
		rcn(el, 'failed');
		rcn(el, 'unconfirmed');
		acn(el, 'confirmed');
		el.innerHTML = 'passed mouseover and mouseout';
	}
	over = false;
	console.log('out');
});

var submit = reg.submit('div#testsubmit',function(e){
	rcn(this, 'unconfirmed');
	rcn(this, 'failed');
	acn(this, 'confirmed');
	this.innerHTML += ' passed submit';
	return false;
},1);

var submit = reg.submit('div#testsubmit',function(e){
	rcn(this, 'unconfirmed');
	acn(this, 'failed');
	rcn(this, 'confirmed');
	this.innerHTML += 'depth failed';
	return false;
},0);

var reset = reg.reset('div#testreset',function(e){
	rcn(this, 'unconfirmed');
	rcn(this, 'failed');
	acn(this, 'confirmed');
	this.innerHTML += ' passed reset';
	return false;
});

reg.change('div#testchange',function(e){
	if (!reg.matches(reg.getTarget(e),'select,input,textarea') || !reg.matches(this,'div#testchange')) {
		rcn(this, 'unconfirmed');
		acn(this, 'failed');
		rcn(this, 'confirmed');
		this.innerHTML += 'failed change';
		return false;
	} else {
		rcn(this, 'unconfirmed');
		rcn(this, 'failed');
		acn(this, 'confirmed');
		this.innerHTML += ' passed change';
		return false;
	}
});

reg.select('div#testselect',function(e){
	rcn(this, 'unconfirmed');
	rcn(this, 'failed');
	acn(this, 'confirmed');
	this.innerHTML += ' passed select';
	return false;
});

reg.postSetup(function(){ document.body.innerHTML += ''; });

</script>
</head>
<body>
<div id="pagewrap">
<p><a href="index.html">&laquo; back to index</a></p>
<h1>Testing Event Delegation</h1>

<div id="testclick" class="test unconfirmed">
click to test
</div>

<div id="testmousedownup" class="test unconfirmed">
mousedown and mouseup to test
</div>

<div id="testdblclick" class="test unconfirmed">
double click to test
</div>

<form action="">
<div id="testfocus" class="test unconfirmed">
<input type="text" value="focus to test" id="foc"/>
</div>
</form>

<div id="testdepth">
<div id="testdepth_inner" class="test unconfirmed">
click to test depth
</div>
</div>

<div class="biz">
<div class="baz 1">
<div id="baz" class="baz 2">
<div class="baz 3">
<div class="test unconfirmed">
mouseover me
</div>
</div>
</div>
</div>
</div>

<div class="biz2">
<div id="baz" class="baz 1">
<div class="baz 2">
<div class="baz 3">
<div class="test unconfirmed">
mouseover me
</div>
</div>
</div>
</div>
</div>

<div id="testsubmit" class="test unconfirmed">
<form action="">
<input type="submit" value="click to test submit"/>
<input type="text"/>
<input/>
</form>
</div>

<div id="testreset" class="test unconfirmed">
<form action="">
<input type="reset" value="click to test reset"/>
<input type="text" value=""/>
</form>
</div>

<div id="testchange" class="test unconfirmed">
<form action="">
<select>
<option>changeme</option>
<option>bar</option>
<option>baz</option>
</select>
<select>
<option>changeme2</option>
<option>bar2</option>
<option>baz2</option>
</select>
<input type="text"/>
<input type="checkbox"/>
<input type="radio"/>
</form>
</div>

<div id="testselect" class="test unconfirmed">
<form action="">
<input type="text" value="selectme"/>
</form>
</div>

</div>
</body>
</html>



